<template>
  <el-row :gutter="10" style="padding: 10px;">
    <el-col :span="4">
      <ContentWrap>
        <RegionTree ref="refRegionTree" :node-click="handleTreeNodeClick"/>
      </ContentWrap>
    </el-col>
    <el-col :span="20">
      <ContentWrap style="padding: 0 !important;">
        <div :style="getMapHeight">
          <drawregion ref="refDrawRegion" :callback="handleMapRegionDrawn"/>
        </div>
      </ContentWrap>
    </el-col>
  </el-row>
</template>

<script>
import drawregion from '@/components/L7Maps/drawregion.vue'
import RegionTree from '../../../components/RegionTree'
import {updateZone} from "@/api/leakage/zone";

export default {
  name: "index",
  components: {
    drawregion,
    RegionTree
  },
  data() {
    return {
      editingZone: undefined,
      screenHeight: null,
    };
  },
  methods: {
    handleTreeNodeClick(node) {
      const levelType = node.levelType
      this.$refs.refDrawRegion.disableDraw()
      if (levelType !== '1' && levelType !== '2') {
        this.editingZone = undefined
        this.$message.error('请选择大分区或DMA节点')
      } else {
        this.editingZone = node
        this.$refs.refDrawRegion.enableDraw(node, 1.0)
      }
    },
    handleMapRegionDrawn(mapData) {
      const {zoom, data} = mapData
      if (zoom && data) {
        this.editingZone.zoom = zoom
        this.editingZone.areaPoint = data
        updateZone(this.editingZone).then(res => {
          this.$message.success(res.msg)
        })
      }
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getMapHeight() {
      const h = this.screenHeight - 70
      return {height: h + 'px'}
    }
  }
}
</script>

<style scoped>

</style>
